<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件中的单项数据流机制与Non-props属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        template: `
            <h1>唯爱薇o朝圣之路</h1>
            <Counter :counter="counter"/>
            <hr\>
            <Counter :counter="counter"/>
            <hr\>
            <Counter :counter="counter"/>
            <hr\>
            <attrTest name="唯爱薇o朝圣之路" style="color: red;"/>
            <hr\>
            <hello style="color:red;" msg="edu.vlovev.cn" />           
        `
    })
    app.component('Counter', {
        props: ['counter'],
        data(){
            return {
                subCounter : this.counter
            }
        },
        template: `
            {{subCounter}}
            <br/>
            <button @click="this.subCounter+=1">增加数量</button>
        `
    })
    app.component('attrTest', {
        //如果不想继承Non-props属性可以使用inheritAttrs
        //inheritAttrs: false,
        template: `
            <div :name="$attrs.name">
                <p>段落1</p>
                <p>段落2</p>            
            </div>
            <div v-bind="$attrs">
                <p>段落3</p>
                <p>段落4</p>            
            </div>            
            <!-- 如果div下还有同级元素则Non-prop属性 无传传递给子组件的根DOM,所以子组件建议反到一个根DOM元素下面<hr /> -->
        `
    })
    app.component('Hello', {
        //在业务逻辑中使用Non-props属性
        mounted() {
            console.log(this.$attrs.msg)
        },
        template: `
        <!-- Non-Prop多节点失效解决方法 -->
        <h3 v-bind="$attrs">Hello World</h3>
        <h3 :style="$attrs.style">Hello World</h3>
        <h3>Hello World</h3>
        `
    })    
    const vm = app.mount("#app")
</script>

</html>